<template>
  <el-card style="margin-bottom:20px;">
    <div slot="header" class="clearfix">
      <span>{{ getLang('profile') }}</span>
    </div>
    <div>
      <div class="text-center">
        <el-row>
          <el-col>
            <AvatarUpload
              upload-url="md_sys_upload/uploadProfileAvatarFile"
              :file-id.sync="user.avatarFile"
              :img-url.sync="user.imgUrl"
              @uploadSuccdess="handleUploadSuccdess"
            />
          </el-col>
        </el-row>
      </div>
      <ul class="list-group list-group-striped">
        <li class="list-group-item">
          <svg-icon icon-class="user" />{{ getLang('userName') }}
          <div class="pull-right">{{ user.userName }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="job" />{{ getLang('jobName') }}
          <div class="pull-right">{{ user.jobTitles }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="phone" />{{ getLang('telNo') }}
          <div class="pull-right">{{ user.telNo }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="email" />{{ getLang('email') }}
          <div class="pull-right">{{ user.email }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="tree" />{{ getLang('belongOrg') }}
          <div class="pull-right">{{ user.orgs }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="peoples" />{{ getLang('belongRole') }}
          <div class="pull-right">{{ user.roles }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon-class="date" />{{ getLang('createDate') }}
          <div class="pull-right">{{ user.cerateDate }}</div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
import * as app from '../../common/utils/BaseApp'
import AvatarUpload from '@/views/common/components/avatar-upload/AvatarUpload'

import langFile from '../profile.lang'
const base = app.install({ langObj: langFile })
export default {
  name: 'Profile',
  components: { AvatarUpload },
  mixins: [base],
  props: {
    user: {
      type: Object,
      default: () => { return { } }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    async handleUploadSuccdess(fileId, fileName) {
      await this.$store.dispatch('user/setAvatar', fileName)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
